﻿<!doctype html>
<html lang="en">
		<head>
		<meta charset="utf-8">
		<title>TweenMax demon</title>
		<script src="minified/jquery-1.10.1.min.js"></script>
		<script src="minified/TweenMax.min.js"></script>
        <script src="minified/Physics2DPlugin.min.js"></script>
		<script src="minified/utils/Draggable.min.js"></script>
		<script src="minified/ThrowPropsPlugin.min.js"></script>
		

		<!--tweenmax中文网演示实例 www.tweenmax.com.cn-->
		<!-- Demo styles -->
		<style>
body, html {
	background-color: black;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#emitter {
	background-color: #222;
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	top: 50%;
	left: 50%;
}
.dot {
	background-color: #4c9a0f;
	border-radius: 50%;
	position: absolute;
}
#instructions {
	position: fixed;
	top: 10px;
	text-align: center;
	color: #999;
	width: 100%;
	font-family: Arial, sans-serif;
}
</style>
		</head>
		<body>
<div id="emitter"></div>
<div id="instructions">Click the dot. Dragging works too.</div>
<script>
var emitter = document.getElementById("emitter"),
    //we'll put all the dots into this container so that we can move the "explosion" wherever we please.
    container = document.createElement("div"),
    //the following variables make things configurable. Play around. 
    emitterSize = 100,
    dotQuantity = 30,
    dotSizeMax = 30,
    dotSizeMin = 10,
    speed = 1,
    gravity = 1;

//setup the container with the appropriate styles
container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
document.body.appendChild(container);

//just for this demo, we're making the emitter's size dynamic and we set xPercent/yPercent to -50 to accurately center it.
TweenLite.set(emitter, {width:emitterSize, height:emitterSize, xPercent:-50, yPercent:-50});

//The "explosion" is just a TimelineLite instance that we can play()/restart() anytime. This helps ensure performance is solid (rather than recreating all the dots and animations every time the user clicks)
var explosion = createExplosion(container);

function createExplosion(container) {
  var tl = new TimelineLite(),
      angle, length, dot, i, size;
  //create all the dots
  for (i = 0; i < dotQuantity; i++) {
    dot = document.createElement("div");
    dot.className = "dot";
    size = getRandom(dotSizeMin, dotSizeMax);
    container.appendChild(dot);
    angle = Math.random() * Math.PI * 2; //random angle
    //figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. 
    length = Math.random() * (emitterSize / 2 - size / 2); 
    //place the dot at a random spot within the emitter, and set its size.
    TweenLite.set(dot, {
      x:Math.cos(angle) * length, 
      y:Math.sin(angle) * length, 
      width:size, 
      height:size, 
      xPercent:-50, 
      yPercent:-50,
      force3D:true
    });
    //this is where we do the animation...
    tl.to(dot, 1 + Math.random(), {
      opacity:0,
      
      physics2D:{
        angle:angle * 180 / Math.PI, //translate radians to degrees
        velocity:(100 + Math.random() * 250) * speed, //initial velocity
        gravity:500 * gravity //you could increase/decrease this to give gravity more or less pull
      }
      
      //if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:
      //x:Math.cos(angle) * length * 6, 
      //y:Math.sin(angle) * length * 6
    }, 0);
  }
  return tl;
}

//just pass this function an element and it'll move the explosion container to its center and play the explosion animation. 
function explode(element) {
	
  var bounds = element.getBoundingClientRect();
  TweenLite.set(container, {x:bounds.left + bounds.width / 2, y:bounds.top + bounds.height / 2});
  explosion.restart();
}

function getRandom(min, max) {
  return min + Math.random() * (max - min);
}

//explode initially, and then whenever the user presses on the dot. 
explode(emitter);
emitter.onmousedown = emitter.ontouchstart = function() {
  explode(emitter);
}

//just for fun, I made the emitter draggable...
Draggable.create("#emitter", {throwProps:true, bounds:window, edgeResistance:0.7,onClick:function(){explode(emitter);}});
    </script>
</body>
</html>